<template>
	<view class="home">
		<u-navbar @leftClick="leftClick" @rightClick="rightClick" placeholder :safeAreaInsetTop="true" title="测流断面列表"
			:fixed="true" rightIcon="plus">
		</u-navbar>
		<view class="conttit">
			选择测流断面
		</view>

		<!-- 提示 -->
		<view class="" v-if="cezhanlist.length == 0">
			<u-empty mode="list">
			</u-empty>
			<view class="" style="text-align: center;font-size: 40rpx; color: #666;margin-top: 50rpx;">
				请自主添加或登录后台下载测段参数
			</view>
		</view>

		<view class="topitem" v-for="(item, index) in cezhanlist" :key="index" @click="urlCezhan(item)"
			@longpress="cezhancliFn(item.cezhanID)">
			<view class="topname">
				{{item.name}}
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;color: #000;">
				<view class="topdik">
					<view class="nubbb">
						{{item.qudikuandu}}
					</view>
					<view class="">
						测段底宽
					</view>

				</view>
				<!-- 			<view class="topdik">
								<view class="">
									渠道断面：
								</view>
								<view class="nubbb" v-if="item.xingzhuang == 1">
									矩形
								</view>
								<view class="nubbb" v-if="item.xingzhuang == 0">
									梯形
								</view>
							</view> -->
				<view class="topdik">
					<view class="nubbb">
						{{item.cexiantiaoshu}}
					</view>
					<view class="">
						测线条数
					</view>

				</view>
			</view>

		</view>
		<!-- 切换 -->
		<view class="" style="height: 50rpx;">

		</view>
		<!-- 遮罩层 -->
		<u-overlay :show="showSlot" @click="showSlot = !showSlot" opacity='0.95'>
			<view class="overlay-wrap">
				<view class="overlay-tit">
					{{controlMode}}
				</view>
				<view class="overlay-flx">
					<view class="overlay-wrap__box" v-for="(i,index) in slotArr" :key="index">
						<view class="box_a" @click="layFn(i)">
							{{i}}
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- <button @click="showSlot = true">123</button> -->
		<u-modal showCancelButton :show="showmodal" :title="titlemodal" @confirm="confirmFn"
			@cancel="cancelFn"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				controlMode:'选择控制方式',
				titlemodal: '是否删除',
				showmodal: false,
				cezhanlist: [],
				toolName: '',
				showSlot: false,
				slotArr: ['输入测量', '定位测量', '手动测量'],
				itemObj: {},
				cezhanID: '',
				currentMeterType: null,
				dopBrand:''
			}
		},
		onShow() {
			this.cezhanlist = this.vuex_saveCezhandata.filter(Boolean);
			console.log('断面列表', this.cezhanlist.length, this.cezhanlist);
		},
		onLoad(option) {
			this.toolName = option.toolName
			this.currentMeterType = option.currentMeterType
			this.dopBrand = option.dopBrand
			console.log('option', option);
			if (this.toolName == '轨道式测流车') {
				let name = ['自动测量', '定位测量', '手动测量','输入测量']
				this.slotArr = name
			}
			if (this.toolName == '索道式测流车') {
				let name = ['自动测量', '定位测量', '手动测量','输入测量']
				this.slotArr = name
			}
			if (this.toolName == '单轨式测流车') {
				let name = ['输入测量','定位测量', '手动测量']
				this.slotArr = name
			}
			if (this.toolName == '多普勒测流') {
				this.controlMode = '选择流速仪'
				let name = ['泰克', '大禹','睿鑫','德希']
				this.slotArr = name
			}
		},
		methods: {
			// 删除
			cezhancliFn(id) {
				this.cezhanID = id
				this.showmodal = true
			},
			confirmFn() {
				this.cezhanitem()
				this.showmodal = false
				console.log('确定');
			},
			cancelFn() {
				this.showmodal = false
				console.log('取消');
			},
			// 删除ID
			cezhanitem() {
				let it = this.cezhanID
				let arr = this.vuex_saveCezhandata
				let index = arr.findIndex(item => item.cezhanID == it);
				if (index !== -1) {
					arr.splice(index, 1);
				}
				this.cezhanlist = arr
				uni.$u.vuex('vuex_saveCezhandata', arr)
			},
			// 返回
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 添加
			rightClick() {
				this.inCezhan()
			},
			inCezhan() {
				let ran01 = new Date().getTime()
				uni.navigateTo({
					url: '/pages/channel/increaseAdd?&id=' + ran01
				});
			},
			// 跳转
			urlCezhan(item) {
				uni.$u.vuex('vuex_cezhanInfo', item)
				if (this.toolName == '轨道式测流车') {
					this.itemObj = item
					this.showSlot = true
					return
				}
				if (this.toolName == '索道式测流车') {
					this.itemObj = item
					this.showSlot = true
					return
				}
				if (this.toolName == '单轨测流车') {
					this.itemObj = item
					this.showSlot = true
					return
				}
				if (this.toolName == '其他测流车') {
					this.itemObj = item
					this.showSlot = true
					return
				}
				if (this.toolName == '人工流速仪测流') {
					uni.redirectTo({
						url: '/pages/currentMeasuringCar/manualCurrentMeter'
					});
					return
				}
				if (this.toolName == '浮标法测流') {
					uni.redirectTo({
						url: '/pages/manualFlowMeasurement/buoyGauging?toolName='+this.toolName
					});
					return
				}
				if (this.toolName == '曲线流量') {
					uni.redirectTo({
						url: '/pages/formula/curveFlow?toolName='+this.toolName
					});
					return
				}
				// if (this.toolName == '计时计数器(自动)') {
				// 	uni.redirectTo({
				// 		url: '/pages/manualFlowMeasurement/automaticCounter?currentMeterType=' + this.currentMeterType
				// 	});
				// 	return
				// }
				if (this.toolName == '计时计数器') {
					uni.redirectTo({
						url: '/pages/manualFlowMeasurement/handCounter?currentMeterType=' + this.currentMeterType +
							'&toolName=' + this.toolName
					});
					return
				}
				if (this.toolName == '多普勒测流') {
					this.itemObj = item
					this.showSlot = true
					// uni.redirectTo({
					// 	url: '/pages/manualFlowMeasurement/duopuleCounter?currentMeterType=' + this.currentMeterType +
					// 		'&toolName=' + this.toolName
					// });
					return
				}
				if (this.toolName == '流量计算器(点流速)') {
					uni.redirectTo({
						url: '/pages/settings/automaticCal?toolName=' + '计时计数器'
					});
					return
				}
				if (this.toolName == '流量计算器(信号数)') {
					uni.redirectTo({
						url: '/pages/settings/signalFlow?toolName=' + '计时计数器'
					});
					return
				}
				if (this.toolName == '水情填报表') {
					uni.redirectTo({
						url: '/pages/manualFlowMeasurement/shuiqingtianbao'
					});
					return
				}
			},
			// 测量类型
			layFn(item) {
				console.log('遮罩',item);
				let obj = this.itemObj
				if (this.toolName == '轨道式测流车') {
					if (item == '自动测量') {
						this.oneButtonMeasurementFn(obj)
					}
					if (item == '定位测量') {
						this.multiFunctionAutomatic(obj)
					}
					if (item == '手动测量') {
						this.multiFunctionManual(obj)
					}
					if (item == '输入测量') {
						this.multiFunctionInput(obj)
					}
					return
				}
				if (this.toolName == '索道式测流车') {
					if (item == '输入测量') {
						// this.manualinputMeasurementFn(obj)
					}
					if (item == '定位测量') {
						this.manualTestMeasurement(obj)
					}
					if (item == '手动测量') {
						this.otherTestMeasurement(obj)
					}
					if (item == '自动测量') {
						this.automaticButton(obj)
					}
					return
				}
				if (this.toolName == '单轨测流车') {
					if (item == '定位测量') {
						this.monorailOrientation(obj)
					}
					if (item == '手动测量') {
						this.monorailManualFn(obj)
					}
					if (item == '输入测量') {
						this.monorailInputlFn(obj)
					}
					return
				}
				if (this.toolName == '其他测流车') {
					if (item == '自动测量') {
						this.manualMeasurementFn(obj)
					}
					if (item == '手动测量') {
						this.automaticMeasurement(obj)
					}
					return
				}
				if (this.toolName == '多普勒测流') {
					if (item == '泰克') {
						uni.redirectTo({
							url: '/pages/manualFlowMeasurement/duopuleCounter?currentMeterType=' + this.currentMeterType +
								'&toolName=' + this.toolName + '&brand=' + item
						});
					}
					if (item == '大禹') {
						uni.redirectTo({
							url: '/pages/manualFlowMeasurement/duopuleCounter?currentMeterType=' + this.currentMeterType +
								'&toolName=' + this.toolName + '&brand=' + item
						});
					}
					if (item == '睿鑫') {
						uni.redirectTo({
							url: '/pages/manualFlowMeasurement/duopuleCounter?currentMeterType=' + this.currentMeterType +
								'&toolName=' + this.toolName + '&brand=' + item
						});
					}
					if (item == '德希') {
						uni.redirectTo({
							url: '/pages/manualFlowMeasurement/duopuleCounter?currentMeterType=' + this.currentMeterType +
								'&toolName=' + this.toolName + '&brand=' + item
						});
					}
					return
				}

			},
			// 轨道自动测量 
			oneButtonMeasurementFn(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/utilityVehicleoneButton?toolName=' + this.toolName
				});
			},
			// 轨道定位
			multiFunctionAutomatic(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/utilityVehicleOrientation?toolName=' + this.toolName
				});
				// uni.redirectTo({
				// 	url: '/pages/home/measuringflow/featureCar?&cexians=' + item.cexiantiaoshu + '&dianfa=' +
				// 		item.morencefa
				// });
			},
			// 轨道手动  
			multiFunctionManual(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/utilityVehicleManual?toolName=' + this.toolName
				});
			},
			// 轨道输入  
			multiFunctionInput(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/utilityVehicleInput?toolName=' + this.toolName
				});
			},
			// 揽道输入
			manualinputMeasurementFn(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/ropewayInputWalk?toolName=' + this.toolName
				});
			},
			// 揽道定位
			manualTestMeasurement(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/ropewayOrientation?toolName=' + this.toolName
				});
			},
			// 揽道手动
			otherTestMeasurement(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/ropewayManual?toolName=' + this.toolName
				});
			},
			// 揽道自动
			automaticButton(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/ropewayButton?toolName=' + this.toolName
				});
			},
			// 单轨测流车定位
			monorailOrientation(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/monorailOrientation?toolName=' + this.toolName + '&dopBrand=' + this.dopBrand
				});
			},
			// 单轨测流车手动
			monorailManualFn(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/monorailManual?toolName=' + this.toolName + '&dopBrand=' + this.dopBrand
				});
			},
			// 单轨测流车输入
			monorailInputlFn(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/monorailInput?toolName=' + this.toolName + '&dopBrand=' + this.dopBrand
				});
			},
			// 其他手动
			automaticMeasurement(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/cablewayManual?toolName=' + this.toolName
				});
			},
			// 其他自动
			manualMeasurementFn(item) {
				uni.redirectTo({
					url: '/pages/currentMeasuringCar/cablewayAuto?toolName=' + this.toolName
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.overlay-wrap {
		// @include flex;
		// justify-content: center;
		// align-items: center;
		// flex: 1;
		width: 750rpx;
		text-align: center;

		// background-color: #144892;
		.overlay-tit {
			margin: 400rpx 0 200rpx 0;
			font-size: 60rpx;
			color: #00ffe2;
		}

		.overlay-flx {
			width: 750rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.overlay-wrap__box {

				// width: 200rpx;
				// background-color: #00ffe2;
				.box_a {
					width: 100rpx;
					padding: 10rpx;
					margin: 20rpx;
					border-radius: 30rpx;
					border: 5rpx solid rgba(180, 180, 180, 0.5);
					color: #00ffe2;
					font-size: 60rpx;
					background-color: rgba(0, 0, 0, 1);
				}
			}
		}


	}

	.topitem {
		width: 650rpx;
		margin: 20rpx auto;
		padding: 0 20rpx 20rpx 20rpx;
		border-radius: 30rpx;
		border: #ffffff solid 2rpx;
		box-shadow: 5rpx 5rpx 20rpx 5rpx #cad0d9;
		background-color: #ffffff;
		// background-color: #f4f6f8;

		.topname {
			font-size: 50rpx;
			padding: 15rpx;
			color: #144892;
			text-align: center;
			margin-bottom: 20rpx;
			border-bottom: #c6d5da solid 2rpx;
			// background-color: #ff8826; 上传测流断面
		}

		.topdik {
			font-size: 50rpx;
			padding: 0 30rpx;
			color: #575f62;
			text-align: center;
			.nubbb {
				font-size: 60rpx;
				color: #144892;
			}
		}
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.conttit {
		width: 600rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		text-align: center;
		color: #ffffff;
		padding: 20rpx 40rpx;
		font-size: 45rpx;
		border-radius: 30rpx;
		border: #ffffff solid 3rpx;
		box-shadow: 5rpx 5rpx 20rpx 5rpx #cad0d9;
		background-color: #144892;
		letter-spacing: 30rpx;
	}
</style>
<style>
	page {
		/* background-color: #f8f8f8; */
	}
</style>